import html2canvas from "html2canvas";
import JsPDF from "jspdf";

/**
 * @param  ele          要生成 pdf 的DOM元素（容器）
 * @param  padfName     PDF文件生成后的文件名字
 * */
export function downloadPDF(ele, pdfName) {
    return new Promise((resolve, reject) => {
        let eleW = ele.offsetWidth; // 获得该容器的宽
        let eleH = ele.offsetHeight; // 获得该容器的高

        let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
        let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离

        var canvas = document.createElement("canvas");
        var abs = 0;

        let win_in =
            document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
        let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）

        if (win_out > win_in) {
            // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
            abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半
            // console.log(a, '新abs');
        }

        canvas.width = eleW * 2; // 将画布宽&&高放大两倍
        canvas.height = eleH * 2;

        var context = canvas.getContext("2d");

        context.scale(2, 2);

        context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
        // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
        // translate的时候，要把这个差值去掉

        //  解决分页内容被切割问题
        let pageHeightNum = (canvas.width / 2 / 592.28) * 841.89;
        let lableListID = document.getElementsByClassName("target-node-item");
        for (let i = 0; i < lableListID.length; i++) {
            let multiple = Math.ceil(
                (lableListID[i].offsetTop + lableListID[i].offsetHeight) /
                    pageHeightNum
            );
            if (isSplit(lableListID, i, multiple * pageHeightNum)) {
                let divParent = lableListID[i].parentNode; // 获取该div的父节点
                let newNode = document.createElement("div");
                newNode.className = "seatDiv";
                newNode.style.background = "#ffffff";
                let _H =
                    multiple * pageHeightNum -
                    (lableListID[i].offsetTop + lableListID[i].offsetHeight);
                newNode.style.height = _H + 60 + "px";
                let next = lableListID[i].nextSibling; // 获取div的下一个兄弟节点
                // 判断兄弟节点是否存在
                if (next) {
                    // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
                    divParent.insertBefore(newNode, next);
                } else {
                    // 不存在则直接添加到最后,appendChild默认添加到divParent的最后
                    divParent.appendChild(newNode);
                }
            }
        }
        html2canvas(ele, {
            background: "#ffffff",
            scale: 5,
            // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
            useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
        })
            .then((canvas) => {
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;
                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = (contentWidth / 592.28) * 841.89;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //页面偏移
                var position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 595.28;
                var imgHeight = (595.28 / contentWidth) * contentHeight;

                var pageData = canvas.toDataURL("image/jpeg", 1.0);

                var pdf = new JsPDF("", "pt", "a4");

                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
                    pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
                    // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
                } else {
                    // 分页
                    while (leftHeight > 0) {
                        pdf.addImage(
                            pageData,
                            "JPEG",
                            0,
                            position,
                            imgWidth,
                            imgHeight
                        );
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if (leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }

                let delArr = document.getElementsByClassName("seatDiv");
                for (let i = delArr.length - 1; i >= 0; i--) {
                    if (delArr[i] && delArr[i].parentElement) {
                        delArr[i].remove();
                    }
                }

                //可动态生成
                pdf.save(pdfName);
                resolve();
            })
            .catch((err) => {
                reject(err);
            });
    });
}

function isSplit(nodes, index, pageHeight) {
    if (
        nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight &&
        nodes[index + 1] &&
        nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight
    ) {
        return true;
    }
    return false;
}

export function markdownToHtmlSubject(contractTempContent) {
    $("#editor-subject").html(
        '<textarea id="appendSubject" style="display:none;"></textarea>'
    );
    $("#appendSubject").val(contractTempContent); //将需要转换的内容加到转换后展示容器的textarea隐藏标签中
    //先对容器初始化，在需要展示的容器中创建textarea隐藏标签，
    editormd.markdownToHTML("editor-subject", {
        htmlDecode: "style,script,iframe",
        emoji: true,
        taskList: true,
        tocm: true,
        tex: true, // 默认不解析
        flowChart: true, // 默认不解析
        sequenceDiagram: true, // 默认不解析
        codeFold: true,
    });
}
